<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main :: common_head"></head>

<style>
    .mylabel {
        display: inline;
    }

    .greenColor {
        color: green;
    }

    .redColor {
        color: red;
    }
</style>

<body>
<!--删除提示模态框-->
<div class="modal fade" id="delcfmModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">是否要删除？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="deleteProperty()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--删除提示模态框结束-->

<div class="container-fluid-full">
    <div class="row-fluid">

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10" style="width: 100%;">
            <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                <li>
                    <i class="fas fa-circle-notch"></i>
                    <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">[[${graphName}]]</a></li>
            </ul>
            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>修改[[${graphName}]]中的基础策略</h2>
                    </div>
                    <div class="box-content">
                        <!--<form class="form-horizontal"  th:action="@{/device/addDevice}" method="post">-->
                        <form id="form1" class="form-horizontal">
                            <input type="hidden" id="graphId" name="graphId" th:value="${relationship.graphId}">
                            <input type="hidden" id="edgeId" name="id" th:value="${relationship.id}">
                            <input type="hidden" id="deviceFrom" name="deviceFrom" th:value="${relationship.deviceFrom}">
                            <input type="hidden" id="deviceTo" name="deviceTo" th:value="${relationship.deviceTo}">
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label">源设备:</label>
                                    <div class="controls">
                                        <select class="select" disabled="true">
                                            <option th:each="device,deviceStat:${deviceList}"
                                                    th:value="${device.deviceId}" th:text="${device.deviceName}"
                                                    th:selected="${device.deviceId == relationship.deviceFrom}"></option>
                                        </select>
                                        <!--<label id="deviceFrom" class="control-label" name="deviceFrom"
                                               th:each="device,deviceStat:${deviceList}"
                                               th:if="${device.deviceId == relationship.deviceFrom}"
                                               th:value="${device.deviceId}" th:text="${device.deviceName}"
                                               style="text-align: left;"></label>-->
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">目标设备:</label>
                                    <div class="controls" >
                                        <select class="select" disabled="true">
                                            <option th:each="device,deviceStat:${deviceList}"
                                                    th:value="${device.deviceId}" th:text="${device.deviceName}"
                                                    th:selected="${device.deviceId == relationship.deviceTo}"></option>
                                        </select>
                                        <!--<label id="deviceTo" class="control-label" name="deviceTo"
                                           th:each="device,deviceStat:${deviceList}"
                                           th:if="${device.deviceId == relationship.deviceTo}"
                                           th:value="${device.deviceId}" th:text="${device.deviceName}"
                                           style="text-align: left;"></label>-->
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">损耗率:</label>
                                    <div class="controls">
                                        <input class="input-small focused" type="number" name="lossRate"
                                               th:value="${relationship.lossRate}" id="lossRate">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">能源属性:</label>
                                    <div class="controls">
                                        <select id="property" class="select" name="typeId">
                                            <option th:each="energy,energyStat:${energyTypeList}" name="typeId"
                                                    th:value="${energy.typeId}" th:text="${energy.typeName}"
                                                    th:selected="${energy.typeId == relationship.typeId}"></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">策略名称:</label>
                                    <div class="controls">
                                        <input class="input-small focused" type="text"
                                               th:value="${relationship.relName}" id="relName" placeholder=""
                                               name="relName" style="width: 205px">
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">策略编码:</label>
                                    <div class="controls">
                                        <input class="input-small focused" type="text"
                                               th:value="${relationship.stgyCode}" id="stgyCode" placeholder=""
                                               name="stgyCode">
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button id="add" type="button" class="btn btn-primary" onclick="toEditEdge();return false">提交</button>
                                    <button type="button" class="btn btn-primary" onclick="toDevice()">返回</button>
                                    <!--<button  type="button" class="btn btn-primary" onclick="toEditEdgeTest();return false">修改</button>-->
                                    <!--<button  type="button" class="btn btn-primary" onclick="toAddTest()">测试</button>-->
                                    <!--<button type="button" class="btn btn-primary" id="addAttr" onclick="addProperty()">添加属性</button>-->
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <!--/span-->
            </div>
            <!--/row-->
        </div>
    </div>
</div>

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <div class="modal-body">
        <p>Here settings can be configured...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>
<div class="common-modal modal fade" id="common-Modal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <ul class="list-inline item-details">
            <li><a href="http://sc.chinaz.com">Admin templates</a></li>
            <li><a href="http://sc.chinaz.com">Bootstrap themes</a></li>
        </ul>
    </div>
</div>

<div class="clearfix"></div>

<div th:replace="main::common_js"></div>

<script th:inline="javascript">
    breadcrumb()
    window.onload = function() {
    	parent.modifyTitle([[${graphName}]] + "基础策略修改")
    }
</script>

<script th:src="@{/js/detect-element-resize.js}"></script>
<script th:src="@{/js/iframe-resize.js}"></script>

<script type="text/javascript">
    //返回上一页
    function toDevice() {
        window.history.back(-1);
    }

    //策略修改提交按钮
    function toEditEdge() {
        /*var deviceFrom = document.getElementById("deviceFrom"); //源设备
        deviceFrom.style.cssText = "disabled:false";
        var deviceFromIndex = deviceFrom.selectedIndex;
        var deviceFromValue = deviceFrom.options[deviceFromIndex].innerHTML;
        var deviceTo = document.getElementById("deviceTo"); //目标设备
        deviceTo.style.cssText = "disabled:false";
        var deviceToIndex = deviceTo.selectedIndex;
        var deviceToValue = deviceTo.options[deviceToIndex].innerHTML;*/
        var lossRate = document.getElementById("lossRate"); //损耗率
        var property = document.getElementById("property"); //能源属性
        var propertyIndex = property.selectedIndex;
        var propertyValue = property.options[propertyIndex].innerHTML;
        if (lossRate.value == "") {
            window.parent.layerAlert('损耗率不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }

        if (propertyValue == "") {
            window.parent.layerAlert('能源属性不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }

        /*if (deviceFromValue == deviceToValue) {
            window.parent.layerAlert('源设备和目标设备不能相同', {
                icon: 5,
                title: "提示"
            });
            return false;
        }*/
        var graphId = document.getElementById("graphId");
        //策略提交接口，后台判断提交的策略是否已经存在
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/multipower/relationship/updateRelationship",
            data: $("#form1").serialize(),
            success: function (data) {
                console.log(data.status);
                if (data.message == "success") {
                    window.location.href = "/multipower/relationship/viewRelationship/" + graphId.value;
                }
                if (data.message == "fail") {
                    window.parent.layerAlert("修改后的策略已存在，请选择不存在的策略", {
                        icon: 5,
                        title: "提示"
                    });
                    return false;
                }
            },
        })
    }
</script>
</body>

</html>